<template>
    <div class="tmpl">
        <nav-bar title="图文详情"></nav-bar>
        <div class="photo-title">
            <p v-text="photoDetail.title">图片标题</p>
            <span>发起日期：{{photoDetail.add_time | convertDate}}</span>
            <span>{{photoDetail.click}}次浏览</span>
            <span>分类：民生经济</span>
        </div>
        <ul class="mui-table-view mui-grid-view mui-grid-9">
            <li v-for="(photo,index) in photos" :key="index"
                class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <!--<img :src="photo.src"/>-->
                <img class="preview-img" :src="photo.src"
                     height="100" @click="$preview.open(index,photos)"/>
            </li>
        </ul>
        <div class="photo-desc">
            <p v-html="photoDetail.content"></p>
        </div>

        <!--评论内容开始-->
        <div class="photo-bottom">
            <ul>
                <li class="photo-comment">
                    <div>
                        <span>提交评论</span>
                        <span><a @click="goback()">返回</a></span>
                    </div>
                </li>
                <li class="txt-comment">
                    <textarea v-model="msg"></textarea>
                </li>
                <li>
                    <mt-button type="primary" size="large" @click="sendComment()">发表评论按钮</mt-button>
                </li>
                <li class="photo-comment">
                    <div>
                        <span>评论列表</span>
                        <span>{{comments.length}}条评论</span>
                    </div>
                </li>
            </ul>
            <ul class="comment-list">
                <li v-for="(comment,index) in comments" :key="index">
                    <!--匿名用户1：大家好 2014-01-04-->
                    {{comment.userName}}:{{comment.content}} {{comment.addTime | convertDate}}
                </li>
            </ul>
            <mt-button size="large" @click="loadByPage()">加载更多按钮</mt-button>
        </div>
        <!--评论内容结束-->
    </div>
</template>

<script>
    export default {
        name: "photoDetail",
        data() {
            return {
                photoDetail: {
                    id: 1,
                    title: '123',
                    add_time: '2018-10-9',
                    click: 2,
                    content: 'fghsdjgfsdkfngkdsfgksjdfgoeihngkdngiddihfgkdfngksndfgknskdfngkdnfgknsdkfgninegkndv考试都能克服那是肯定能覅广阔的烦恼款到发货刚开电脑卡给你发的那个快递咖啡馆快递费关电脑'
                },//存放详情对象
                photos: [
                    {
                        src: 'http://img4.imgtn.bdimg.com/it/u=1830740024,3224288526&fm=200&gp=0.jpg'
                    },
                    {
                        src: 'http://img4.imgtn.bdimg.com/it/u=1830740024,3224288526&fm=200&gp=0.jpg'
                    },
                    {
                        src: 'http://img4.imgtn.bdimg.com/it/u=1830740024,3224288526&fm=200&gp=0.jpg'
                    },
                    {
                        src: 'http://img4.imgtn.bdimg.com/it/u=1830740024,3224288526&fm=200&gp=0.jpg'
                    }
                ],//存放缩略图
                comments: [
                    {
                        userName: '张三',
                        content: '哈哈哈哈哈哈',
                        addTime: '2018-10-9'
                    },
                    {
                        userName: '李四',
                        content: '嘻嘻嘻嘻嘻嘻嘻',
                        addTime: '2018-10-9'
                    },
                    {
                        userName: '王五',
                        content: '啦啦啦啦啦啦啦',
                        addTime: '2018-10-9'
                    },
                    {
                        userName: '小明',
                        content: '呵呵呵呵呵呵呵呵呵',
                        addTime: '2018-10-9'
                    },
                    {
                        userName: '大熊',
                        content: '乐乐乐乐乐乐乐乐乐乐',
                        addTime: '2018-10-9'
                    },
                ],//存放评论
                addComments: [
                    {
                        userName: '张三',
                        content: '哈哈哈哈哈哈',
                        addTime: '2018-10-9'
                    },
                    {
                        userName: '李四',
                        content: '嘻嘻嘻嘻嘻嘻嘻',
                        addTime: '2018-10-9'
                    },
                    {
                        userName: '王五',
                        content: '啦啦啦啦啦啦啦',
                        addTime: '2018-10-9'
                    },
                    {
                        userName: '小明',
                        content: '呵呵呵呵呵呵呵呵呵',
                        addTime: '2018-10-9'
                    },
                    {
                        userName: '大熊',
                        content: '乐乐乐乐乐乐乐乐乐乐',
                        addTime: '2018-10-9'
                    },
                ],//追加评论
                pageIndex: 1,//页码
                cid: this.$route.params.id,//记录当前图片id
                msg: '',//评论发表
            }
        },
        created() {
            // //获取路由参数
            // let id = this.$route.params.id;
            // //发起2个请求
            // //图片详情
            // this.$ajax.get('getImageInfo/' + this.cid)
            //     .then(res => {
            //         this.photoDetail = res.data.message;
            //     })
            //     .catch(err => {
            //         console.log(err)
            //     });
            //缩略图
            // this.$ajax.get('getImages/' + this.cid)
            //     .then(res => {
            //         this.photos = res.data.message;
            //         //forEach
            //         this.photos.forEach((ele)=>{
            //             ele.w = 600;
            //             ele.h = 400;
            //         })
            //     })
            //     .catch(err => {
            //         console.log(err)
            //     });

            this.photos.forEach((ele) => {
                ele.w = 600;
                ele.h = 400;//缩略图显示的高
            });
            this.loadFirst()

        },
        methods: {
            //加载第一页评论
            loadFirst() {
                // this.$ajax.get('postcomment/' + this.cid + '?pageindex=1')
                //     .then(res=>{
                //         this.comments = res.data.message;
                //     })
                //     .catch(err=>{
                //         console.log(err)
                //     })
            },
            //加载更多
            loadByPage() {
                //     this.$ajax.get('postcomment/' + this.cid + '?pageindex=' + (++this.pageIndex))
                //         .then(res => {
                //             //追加
                //             this.comments = this.comments.concat(res.data.message);
                //         })
                //         .catch(err => {
                //             console.log(err)
                //         })
                // }
                this.comments = this.comments.concat(this.addComments)
            },
            //发表评论
            sendComment() {
                //发表评论请求后台
                // this.$ajax.post('/postcomment/' + this.cid,
                //     'content=' + this.msg)
                //     .then(res => {
                //         console.log(res.data.message)
                //         this.loadFirst();
               //          this.msg=''
                //     })
                //     .catch(err => {
                //         console.log(err)
                //     })
                this.comments.push({
                    userName: '匿名用户',
                    content: this.msg,
                    addTime: new Date()
                });
                //获取最新的第一页数据
                this.loadFirst();
                this.msg=''
            },
            goback(){
                this.$router.go(-1);
            }
        }
    }
</script>

<style scoped>
    li {
        list-style: none;
    }

    ul {
        margin: 0;
        padding: 0;
    }

    .photo-title {
        overflow: hidden;
    }

    .photo-title,
    .photo-desc {
        border-bottom: 1px solid rgba(0, 0, 0, 0.2);
        padding-bottom: 5px;
        margin-bottom: 5px;
        padding-left: 5px;
    }

    .photo-title p {
        color: #13c2f7;
        font-size: 20px;
        font-weight: bold;
    }

    .photo-title span {
        margin-right: 20px;
    }

    .mui-table-view.mui-grid-view.mui-grid-9 {
        background-color: white;
        border: 0;
    }

    .mui-table-view.mui-grid-view.mui-grid-9 li {
        border: 0;
    }

    .photo-desc p {
        font-size: 18px;
    }

    .mui-table-view-cell.mui-media.mui-col-xs-4.mui-col-sm-3 {
        padding: 2px 2px;
    }

    /*评论内容样式开始*/
    .photo-comment > div span:nth-child(1) {
        float: left;
        font-weight: bold;
        margin-left: 5px;
    }

    .photo-comment > div span:nth-child(2) {
        float: right;
    }

    .photo-comment {
        height: 30px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.4);
        line-height: 30px;
        margin-bottom: 5px;
    }

    .txt-comment {
        padding: 5px 5px;
    }

    .txt-comment textarea {
        margin-bottom: 5px;
    }

    .comment-list li {
        border-bottom: 1px solid rgba(0, 0, 0, 0.2);
        padding-bottom: 5px;
        margin-bottom: 5px;
        padding-left: 5px;
    }

    li {
        list-style: none;
    }

    ul {
        margin: 0;
        padding: 0;
    }

    /*评论内容样式结束*/
</style>